<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery val()和正则手机号验证</title>
</head>
<body>
    <form id="form1">
        <p>
            <label for="tel">手机号:</label>
            <input type="tel" name="tel" id="tel" >
        </p>
        <p>
            <button type="submit">提交验证手机号</button>
        </p>
    </form>
</body>
<script src="../js/jQuery.js"></script>
<script>
    // 扩展讲解 使用jQuery拦截 form表单提交事件
    $("#form1").submit( function(e) {
        let tel = $("#tel").val();
        /* 扩展知识: 正则匹配表达式规则
         * `/` 和 `/` 之间的东西是检验规则
         * ^ 表示完全匹配(必须保证你验证的手机号1开头) 第一个数字必须是1
         *  `[` 和 `]`之间表示包含 [345]表示第二个数字可以是 3 4 5 任意一个
         * \d表示数字0~9 {9}表示前面规则实现9次
         */
        let reg = /^1[345678]\d{9}$/;
        if(reg.test(tel)){// reg规则调用test方法验证tel
            alert("手机号合法")
        }else{
            alert("手机号不合法")
        }

        // 返回一个return false 禁止 form表单默认提交效果
        return false;
    })
</script>
</html>